<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <title>管理后台</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

        <!-- 可选的Bootstrap主题文件（一般不用引入） -->
        <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

        <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
        <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>

        <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
        <script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>        
        <link href="Public/admin/css/dashboard.css" rel="stylesheet">
        <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.css">



        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.1/bootstrap-table.min.css">

        <!-- Latest compiled and minified JavaScript -->
        <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.1/bootstrap-table.min.js"></script>

        <!-- Latest compiled and minified Locales -->
        <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.1/locale/bootstrap-table-zh-CN.min.js"></script>

        <script src="Public/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
        <script src="Public/bootstrap-datepicker/locales/bootstrap-datepicker.zh-CN.min.js"></script>
        <link href="Public/bootstrap-datepicker/css/bootstrap-datepicker.min.css" rel="stylesheet">

        <script src="Public/bootstrap-datepicker/js/bootstrap-table-export.min.js"></script>
        <script src="//rawgit.com/hhurz/tableExport.jquery.plugin/master/tableExport.js"></script>

        <script src="Public/bootstrap-datepicker/js/bootstrap-table-filter-control.min.js"></script>

    </head>
    <body>
        <nav class="navbar navbar-inverse navbar-fixed-top">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#">管理后台</a>
                </div>
                <include file="./Public/admin/navbar.html" keywords="1" />

            </div>
        </nav>

        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-2 col-md-2">
                    <include file="./Public/admin/menu.html" keywords="1" />
                </div>
                <!--正式内容开始-->
                <div class="col-sm-9 col-md-10  main">
                    <h1 class="page-header">数据同步</h1>     
                    <a class="btn btn-primary submit_Tb" href="javascript:void(0)" role="button">确定同步</a>
                    <table id="table"></table>
                </div>
                <!--正式内容结束-->
            </div>
        </div>

    </body>    
    <script src="http://cdn.bootcss.com/bootstrap-table/1.9.1/bootstrap-table.min.js"></script>
        <script src="http://cdn.bootcss.com/bootstrap-table/1.9.1/locale/bootstrap-table-zh-CN.min.js"></script>
        <script>


                $('#table').bootstrapTable({
                    url: '?m=Center&c=Dbapp&a=ChannelIndex&action=getData',
                    sidePagination: 'client',
                    silentSort: true,
                    pagination: true,
                    pageSize: 20,
                    search: true,
                    showExport: true,
                    filterControl: true,
                    //    clickToSelect:true,
                    columns: [ {
                            field: 'topic_id',
                            title: 'ID'
                        }, {
                            field: 'pic',
                            title: '图片',
                            sortable: true,
                            formatter:function(value,row,index){  
                               var a = '<img height="80" src="'+row.pic+'">';                   
                                    return a;  
                            } 
                        }, {
                            field: 'name',
                            title: '标题',
                            sortable: true,
                        }, {
                            field: 'content',
                            title: '描述',
                            sortable: true,
                        }, {
                            field: 'aritcle_count',
                            title: '文章数',
                            sortable: true,
                        },{
                            field:'mp3',
                            title:'音频',    
                formatter:function(value,row,index){  
                   var v = '<audio src="'+row.audio+'" controls="controls">您的浏览器暂不支持video标签。播放视频</video>';                   
                        return v;  
                    } 
                        }  ]
                });   


            $(".submit_Tb").click(function () {
                $('#table').bootstrapTable('refresh', {url: '?m=Center&c=Dbapp&a=ChannelIndex&action=tbData'});
            });
        </script>    
</html>
